<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Store test page</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('img').click(function(event) {
					$(this).effect('bounce', {direction: 'vertical'}, 'normal');
				});

				$('img').hover(function(event) {
					$(this).effect('explode', {mode: 'hide'}, 'normal');
				});

				$('#position').click(function(event) {
					$('#mozilla').position({
						my: 'left top',
						at: 'right bottom',
						of: '#bug'
					});
				});
			});
		</script>
		<style type="text/css">
		</style>
	</head>
	<body>
	<h1>jQuery UI test page</h1>
	<p>
		<input type="button" id="position" value="Set position"/>
	</p>
	
	<img src="images/mozilla.jpg" id="mozilla" />
	<img src="images/bug.jpeg" id="bug" />

	</body>
</html>


